<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>未来小说网--登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <!-- 作为公共部分分离 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link rel="stylesheet" href="../../resources/css/header.css" th:href="@{/resources/css/header.css}">
    <link rel="stylesheet" href="../../resources/css/login.css" th:href="@{/resources/css/login.css}">
    <link rel="stylesheet" href="../../resources/font/iconfont.css" th:href="@{/resources/font/iconfont.css}">
    <!-- 作为公共部分分离/ -->
</head>

<body>
    <div class="header">
        <div class="w">
            <div class="top">
                未来小说网
            </div>
        </div>
    </div>
    <div class="content" >
        <div class="w">
            <div class="login-img">
                <img src="../../resources/img/loginBg.jpg" th:src="@{/resources/img/loginBg.jpg}" alt="login">
            </div>
            <div class="login-wrap">
                <div class="title-container">
                    <h2 class="title">Login</h2>
                    <input type="text" name="us" placeholder="username" class="input-item username" id="us">
                    <input type="password" name="ps" placeholder="password" class="input-item psw" id="ps">
                    <button class="btn" id="login" th:href="@{/login(redirectTo=${@templateController.getRequestUri()})}">登录</button>
                    <a th:href="@{/register}"><button class="btn" id="reg">注册</button></a>
                    <div class="icon">

<!--                        <ul>-->
<!--                            <li class="iconfont icon-twitter"></li>-->
<!--                            <li class="iconfont icon-icon_facebook"></li>-->
<!--                            <li class="iconfont icon-ins"></li>-->
<!--                            <li class="iconfont icon-emailFilled"></li>-->
<!--                        </ul>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="popup_over" id="jump_reason" style="text-align: center; line-height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: white; position: absolute; width: 180px; height: 80px; border: 1px solid #D5D6D5; z-index: 1000;"><i class="iconfont icon-sad" style="font-size: 30px;color: #1afa29;"></i><span style="font-size: 16px; position: relative; bottom: 5px;" th:text="${errorMessage}"> </span></div>
    </div>
</body>
<script th:inline="javascript">
    let contextPath=/*[[${#request.getContextPath()}]]*/'http://localhost:8080/future-novel';
</script>
<script src="../../resources/js/index2.js" th:src="@{/resources/js/index2.js}"></script>
<script th:inline="javascript" async>
    $(document).ready(function() {
        $('#login').on('click', function() {
            let us = $('#us').val(),
                ps = $('#ps').val();
            if (us == '' || ps == '') {
                popup_over('icon-sad', '#d81e06', "输入内容不能为空");
            } else if ( ps.length < 6) {
                popup_over('icon-sad', '#d81e06', "密码至少6位");
            } else {
                $.ajax({
                    url: /*[[${#request.getContextPath()} + '/api/login']]*/'',
                    type: 'post',
                    datatype: "json",
                    data: JSON.stringify({
                        userName: us,
                        password: ps,
                    }),
                    contentType: 'application/json; charset=utf-8',
                    success: function(data) {
                        $(location).attr('href', data.redirectTo);
                        console.log('登录成功');
                    },
                    error: function(jqXHR) {
                        let mes = JSON.parse(jqXHR.responseText);
                        setTimeout(function(){
                            if ($.trim(mes.error) == 'USER_UNVERIFIED') {
                            popup_over('icon-sad', '#d81e06', "账号需要激活");
                            setTimeout(function(){
                                popup_activate('activate_yes');
                            },1500)
                        } else {
                            popup_over('icon-sad', '#d81e06', mes.errorMessage);
                        }
                        },100)

                    }
                })
            }

        });
        $('body').keydown(function(){
            if (event.keyCode == 13) {
                $('#login').click();
            };

        });
        if($('#jump_reason').text()== 'OK'){
            $('#jump_reason').css('display','none');
        }else{
            setInterval(() => {
            $('#jump_reason').css('display','none');
        }, 2000);
        }
    })
</script>

</html>
